<template>
  <div class="banner-wrapper">
    <Row>
      <Col :span="24" style="text-align: right;">
      <Button type="primary" @click="handleAdd">{{$t('m.add')}}</Button>
      </Col>
    </Row>
    <Tabs style="margin-top: 15px;" v-model="tab" @on-click="handleTab">
      <TabPane :label="this.$t('m.nowShowB')" name="1">
        <Table ref="table" border :data="data1" :columns="columns" :loading="loading">
        </Table>
      </TabPane>
      <TabPane :label="this.$t('m.donShowB')" name="0">
        <Table ref="table" border :data="data0" :columns="columns2" :loading="loading">
        </Table>
      </TabPane>
    </Tabs>

    <dialog-operator :title="title" :formData="formData" :type="type" v-model="showModal" @cancel="handleModalCancel" @ok="handleModalOk"></dialog-operator>
  </div>
</template>

<script>
import qs from 'qs';
import dialogOperator from './components/dialog-operator.vue';

export default {
  name: 'banner',
  data () {
    return {
      columns: [
        {
          title: this.$t('m.picture'),
          key: 'imgUrl',
          align: 'center',
          render: (h, params) => {
            return h('div', {
              style: {
                paddingTop: '5px',
                paddingBottom: '5px'
              }
            }, [
              h('img', {
                attrs: {
                  src: params.row.imgUrl
                },
                style: {
                  maxHeight: '60px'
                }
              }),
            ]);
          }
        },
        {
          title: this.$t('m.deLinkurl'),
          key: 'linkUrl',
          align: 'center',
          render: (h, params) => {
            const { linkUrl } = params.row;
            return h('a', {
              attrs: {
                href: linkUrl,
                target: '_blank'
              },
              style: {
                color: '#2d8cf0',
                textDecoration: 'underline'
              }
            }, linkUrl);
          }
        },
        {
          title: this.$t('m.deTitle'),
          key: 'name',
          align: 'center'
        },
        {
          title: this.$t('m.showSort'),
          key: 'sort',
          align: 'center'
        },
        {
          title: this.$t('m.type'),
          key: 'openType',
          align: 'center',
        },
        {
          title: this.$t('m.remarkCo'),
          key: 'remark',
          align: 'center'
        },
        {
          title: this.$t('m.operate'),
          width: 150,
          align: 'center',
          render: (h, params) => {
            let id = params.row.id;
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    this.handleEdit(id);
                  }
                }
              }, this.$t('m.edit')),
              h('Poptip', {
                props: {
                  confirm: true,
                  title: this.$t('m.sdList'),
                  placement: 'left',
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.handleDelete(id);
                  }
                }
              }, [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      // console.log('delete');
                    }
                  }
                }, this.$t('m.delete'))
              ])
            ]);
          }
        }
      ],
      columns2: [
        {
          title: this.$t('m.picture'),
          key: 'imgUrl',
          align: 'center',
          render: (h, params) => {
            return h('div', {
              style: {
                paddingTop: '5px',
                paddingBottom: '5px'
              }
            }, [
              h('img', {
                attrs: {
                  src: params.row.imgUrl
                },
                style: {
                  maxHeight: '60px'
                }
              }),
            ]);
          }
        },
        {
          title: this.$t('m.deLinkurl'),
          key: 'linkUrl',
          align: 'center',
          render: (h, params) => {
            const { linkUrl } = params.row;
            return h('a', {
              attrs: {
                href: linkUrl,
                target: '_blank'
              },
              style: {
                color: '#2d8cf0',
                textDecoration: 'underline'
              }
            }, linkUrl);
          }
        },
        {
          title: this.$t('m.deTitle'),
          key: 'name',
          align: 'center'
        },
        {
          title: this.$t('m.showSort'),
          key: 'sort',
          align: 'center'
        },
        {
          title: this.$t('m.type'),
          key: 'openType',
          align: 'center',

        },
        {
          title: this.$t('m.remarkCo'),
          key: 'remark',
          align: 'center'
        },
        {
          title: this.$t('m.operate'),
          width: 150,
          align: 'center',
          render: (h, params) => {
            let id = params.row.id;
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    this.handleEdit(id);
                  }
                }
              }, this.$t('m.edit')),
              h('Poptip', {
                props: {
                  confirm: true,
                  title: this.$t('m.sdList'),
                  placement: 'left',
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.handleDelete(id);
                  }
                }
              }, [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      // console.log('delete');
                    }
                  }
                }, this.$t('m.delete'))
              ])
            ]);
          }
        }
      ],
      data1: [],
      data0: [],
      loading: false,
      title: '',
      showModal: false,
      tab: '1',
      type: '',
      formData: {}
    }
  },
  created () {
    this.getBannerList();
    this.getBannerListN()
  },
  methods: {
    getBannerListN () {
      this.loading = true;
      this.$http.get('/api/laocai/sys/banner/list?status=0').then((res) => {
        if (res.body.code == 0) {
          if (!res.body.result) {
            this.data0 = []
          } else {
            res.body.result.list.forEach((val, index, val_arr) => {
              switch (val_arr[index].openType) {
                case 'in':
                  val_arr[index].openType = '在app中打开'
                  break;
                case 'out':
                  val_arr[index].openType = '在浏览器中打开'
                  break;
                default:
                  break;
              }
            })
            this.data0 = res.body.result.list
          }
          this.loading = false
        } else {
          this.loading = false
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }


      })
    },
    getBannerList () {
      this.loading = true;
      this.$http.get('/api/laocai/sys/banner/list?status=1').then((res) => {
        if (res.body.code == 0) {
          if (!res.body.result) {
            this.data1 = []
          } else {
            res.body.result.list.forEach((val, index, val_arr) => {
              switch (val_arr[index].openType) {
                case 'in':
                  val_arr[index].openType = '在app中打开'
                  break;
                case 'out':
                  val_arr[index].openType = '在浏览器中打开'
                  break;
                default:
                  break;
              }

            })
            this.data1 = res.body.result.list

          }


          this.loading = false
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }

      })
    },
    handleTab (name) {
      this.tab = name;
    },
    handleAdd () {
      this.title = this.$t('m.addBpic');
      this.type = 'add';
      this.showModal = true;
    },
    handleEdit (id) {
      this.title = this.$t('m.editBpic');
      this.type = 'update';
      this.$http.get('/api/laocai/sys/banner/info?id=' + id)
        .then((res) => {
          if (res.body.code == 0) {
            this.formData = res.body.result;
            this.formData.status = Number(this.tab);
            this.showModal = true;
          }
          else {
            this.$Message.success(this.$t('m.errorCode' + res.body.code));
          }
        })
    },
    handleDelete (id) {
      this.$http.post('/api/laocai/sys/banner/update', {
        id: id,
        status: 0
      })
        .then((res) => {

          if (res.body.code == 0) {
            this.$Message.success('删除banner成功');
            this.getBannerList();
          } else {
            this.$Message.success(this.$t('m.errorCode' + res.body.code));
          }
        }, error => {
          console.log(error);
        })
    },
    handleModalCancel (status) {
      this.showModal = false;
    },
    handleModalOk () {
      this.showModal = false;
      this.getBannerList();
    }
  },
  components: {
    dialogOperator
  }
}
</script>

<style lang="scss" scoped>
@import "./banner.scss";
</style>
